<template>
  <!-- <common-layout> -->
  <div class="common-layout">
    <div class="content">
      <div class="top">
        <div class="header">
          <img alt="logo" class="logo" src="@/assets/img/logo.png" />
          <span class="title">PISX</span>
        </div>
      </div>
      <div class="login">
        <a-form @submit="onSubmit" :form="form">
          <a-tabs
            size="large"
            :tabBarStyle="{ textAlign: 'center' }"
            style="padding: 0 2px"
          >
            <a-tab-pane tab="账户密码登录" key="1">
              <a-alert
                type="error"
                :closable="true"
                v-show="error"
                :message="error"
                showIcon
                style="margin-bottom: 24px"
              />
              <a-form-item>
                <a-input
                  autocomplete="autocomplete"
                  size="large"
                  placeholder="请输入账号"
                  v-decorator="[
                    'name',
                    {
                      rules: [
                        {
                          required: true,
                          message: '请输入账户名',
                          whitespace: true,
                        },
                      ],
                    },
                  ]"
                >
                  <a-icon slot="prefix" type="user" />
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-input
                  size="large"
                  placeholder="请输入密码"
                  autocomplete="autocomplete"
                  type="password"
                  v-decorator="[
                    'password',
                    {
                      rules: [
                        {
                          required: true,
                          message: '请输入密码',
                          whitespace: true,
                        },
                      ],
                    },
                  ]"
                >
                  <a-icon slot="prefix" type="lock" />
                </a-input>
              </a-form-item>
            </a-tab-pane>
            <a-tab-pane tab="手机号登录" key="2">
              <a-form-item>
                <a-input size="large" placeholder="mobile number">
                  <a-icon slot="prefix" type="mobile" />
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-row :gutter="8" style="margin: 0 -4px">
                  <a-col :span="16">
                    <a-input size="large" placeholder="captcha">
                      <a-icon slot="prefix" type="mail" />
                    </a-input>
                  </a-col>
                  <a-col :span="8" style="padding-left: 4px">
                    <a-button
                      style="width: 100%"
                      class="captcha-button"
                      size="large"
                      >获取验证码</a-button
                    >
                  </a-col>
                </a-row>
              </a-form-item>
            </a-tab-pane>
          </a-tabs>
          <div>
            <a-checkbox :checked="true">自动登录</a-checkbox>
            <a style="float: right">忘记密码</a>
          </div>
          <a-form-item>
            <a-button
              :loading="logging"
              style="width: 100%; margin-top: 24px"
              size="large"
              htmlType="submit"
              type="primary"
              >登录</a-button
            >
          </a-form-item>
          <!-- <div>
            其他登录方式
            <a-icon class="icon" type="alipay-circle" />
            <a-icon class="icon" type="taobao-circle" />
            <a-icon class="icon" type="weibo-circle" />
            <router-link style="float: right" to="/dashboard/workplace"
              >注册账户</router-link
            >
          </div> -->
        </a-form>
      </div>
    </div>
  </div>
  <!-- </common-layout> -->
</template>

<script>
// import CommonLayout from '@/layouts/CommonLayout'
import {login} from '@/api/user'
// import {getRoutesConfig} from '@/services/user'
// import {setAuthorization} from '@/utils/request'
// import {loadRoutes} from '@/utils/routerUtil'
// // import {mapMutations} from 'vuex'
// import {request, METHOD} from '@/utils/request'

export default {
  name: "Login",
  // components: {CommonLayout},
  data() {
    return {
      logging: false,
      error: "",
      form: this.$form.createForm(this),
    };
  },
  methods: {
    // ...mapMutations('account', ['setUser', 'setPermissions', 'setRoles']),
    onSubmit(e) {
      let userInfo = {
        id: 3,
        loginName: "admin123",
        email: "admin123@pisx.com",
        organizationId: 2,
        realName: "admin",
        phone: "15084810691",
        internationalTelCode: "+86",
        language: "zh_CN",
        languageName: "简体中文",
        timeZone: "GMT+8",
        lastPasswordUpdatedAt: "2021-12-01 11:53:29",
        phoneCheckFlag: 0,
        emailCheckFlag: 0,
        passwordResetFlag: 1,
        tenantName: "湃睿集团",
        tenantNum: "rd",
        dateFormat: "YYYY-MM-DD",
        timeFormat: "HH:mm:ss",
        dateTimeFormat: "YYYY-MM-DD HH:mm:ss",
        changePasswordFlag: 0,
        title: "HZERO平台验证环境",
        roleMergeFlag: 0,
        tenantId: 2,
        waterMarkFlag: 1,
        waterMarkRule: "${realName}",
        currentRoleId: 13,
        currentRoleCode: "plmu-user",
        currentRoleName: "PLM易用性系统用户",
        currentRoleLevel: "organization",
        currentRoleLabels: [],
        favicon:
          "http://hzerodevoss.saas.hand-china.com/hz-public/hpfm05/0/2f33708b40c645cd81773a5acd22ca29@HZERO1000.png",
        dataHierarchyFlag: 0,
        recentAccessTenantList: [],
        additionInfo: { clientId: 6, clientName: "plm-user-client" },
      };
      
      // let accessToken = 'Pd-Oauth2: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsib2lsIl0sInVzZXJfbmFtZSI6Imx1aGUiLCJhdXRob3IiOiJQaS1EaWdpbm4g5pWw5a2X5YyW5Yib5paw5bmz5Y-wIiwic2NvcGUiOlsiYWxsIl0sInBkVXNlciI6Imx1aGUiLCJ0aW1lIjoiMjAyMi0wMy0yNCAwODozMzoyNiIsImV4cCI6MTY0ODExNTQyMiwiYXV0aG9yaXRpZXMiOlsicGQtb2F1dGgyIl0sImp0aSI6ImI4YjIyMTE2LWY2OTItNDVhMS1iNzhkLWMzOThkN2FkN2E1NCIsImNsaWVudF9pZCI6Im9pbCJ9.VqQ8O3jnRjpeP2EaxECtIQfOF-sIlEwEEDp_idGbmjo'
      // sessionStorage.setItem('authorToken', accessToken);

      e.preventDefault();
      this.form.validateFields((err) => {
        if (!err) {
          this.logging = true;
          const name = this.form.getFieldValue("name");
          const password = this.form.getFieldValue("password");
          // let param = {
          //   username:name,
          //   password:password,
          //   remember_me:true
          // }
          // request('/jeecg-boot/sys/mLogin', METHOD.POST,param).then(res => {
          //   this.afterLogin(res)
          // })


          let parmas = {
            "username": name,
            "password": password,
          }
          login(parmas).then(res => {
            if (res.data && res.data.success) {
              sessionStorage.setItem('authorToken', res.data.result.access_token);
              res.data.result.loginName = res.data.result.username
              sessionStorage.setItem("userInfo", JSON.stringify(res.data.result));
              this.$message.success('登录成功')
              this.$router.push({
                path: "/homePage",
              });
            } else {
              this.logging = false
              this.$message.error(res.data.message)
            }
          })

          
          // if (name === "pisx" || name === "luhe" && password === "123456") {
          //   sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
          //   this.$router.push({
          //     path: "/homePage",
          //   });
          // }
        }
      });
    },
    // afterLogin(res) {
    //   this.logging = false
    //   const loginRes = res.data
    //   if (loginRes.code >= 0) {
    //     const {user, permissions, roles} = loginRes.data
    //     this.setUser(user)
    //     this.setPermissions(permissions)
    //     this.setRoles(roles)
    //     setAuthorization({token: loginRes.data.token, expireAt: new Date(loginRes.data.expireAt)})
    //     localStorage.removeItem('menuLevel')
    //     localStorage.setItem('menuLevel',1)
    //     // 获取路由配置
    //     getRoutesConfig().then(result => {
    //       const routesConfig = result.data.data
    //       loadRoutes(routesConfig)
    //       this.$router.push('/index')
    //       this.$message.success(loginRes.message, 3)
    //     })
    //   } else {
    //     this.error = loginRes.message
    //   }
    //   // this.logging = false
    //   // const loginRes = res.data
    //   // if (loginRes.success) {
    //   //   localStorage.removeItem('menuLevel')
    //   //   localStorage.setItem('menuLevel',1)
    //   //   // const {userInfo, permissions, roles} = loginRes.data
    //   //   this.setUser(loginRes.result.userInfo)
    //   //   // this.setPermissions(permissions)
    //   //   // this.setRoles(roles)
    //   //   setAuthorization({token: loginRes.result.token})
    //   //   // 获取路由配置
    //   //   getRoutesConfig().then(result => {
    //   //     const routesConfig = result.data.data
    //   //     loadRoutes(routesConfig)
    //   //     this.$router.push('/index')
    //   //     // this.$router.push('/dashboard/workplace')
    //   //     this.$message.success(loginRes.message, 3)
    //   //   })
    //   // } else {
    //   //   this.error = loginRes.message
    //   // }
    // }
  },
};
</script>

<style lang="less" scoped>
.common-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  background-color: #eee;
  background-image: url("https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 110px;
  background-size: 100%;
  .content {
    padding: 32px 0;
    flex: 1;
    @media (min-width: 768px) {
      padding: 112px 0 24px;
    }

    .top {
      text-align: center;
      .header {
        height: 44px;
        line-height: 44px;
        a {
          text-decoration: none;
        }
        .logo {
          height: 44px;
          vertical-align: top;
          margin-right: 16px;
        }
        .title {
          font-size: 33px;
          color: #000;
          font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica,
            sans-serif;
          font-weight: 600;
          position: relative;
          top: 2px;
        }
      }
      .desc {
        font-size: 14px;
        color: #000;
        margin-top: 12px;
        margin-bottom: 40px;
      }
    }
    .login {
      width: 368px;
      margin: 0 auto;
      @media screen and (max-width: 576px) {
        width: 95%;
      }
      @media screen and (max-width: 320px) {
        .captcha-button {
          font-size: 14px;
        }
      }
      .icon {
        font-size: 24px;
        color: #000;
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #eee;
        }
      }
    }
  }
}
</style>
